<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>爱车出租</title>
		 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
         <meta name="apple-mobile-web-app-capable" content="yes">
         <meta content="yes" name="apple-touch-fullscreen">
         <meta name="apple-mobile-web-app-status-bar-style" content="black">  
         <script src="js/add_js.js"></script>
	</head>
	<body>
		<div class="ball-pulse"><div></div><div></div><div></div></div>
		
		<!--nav-->
        <nav class="bar bar-tab">
             <a class="tab-item external" href="home.html">我的</a>
             <a class="tab-item external" href="order.html">定单</a>
             <a class="tab-item external active" href="carRental.html">出租</a>
             <a class="tab-item external" href="rentalCar.html">租车</a>
             <div class="clear"></div>
        </nav>
    <!--nav-->
		<div class="page content">
			
            <!--选服务地点-->
           <div class="get-car-hold"></div>
      	   <div class="get-car">
      	      <div class="get-car-list get-car-lista"><span class="active" name='abcd'>ABCDE</span><span>HJKLMN</span><span>HJKLMN</span><span>OPQRST</span><span>UVWXYZ</span><div class="clear"></div></div>
      	      <input class="get-car-other-box" type="text" placeholder="点击输入车辆品牌及型号" >
      	      <div class="get-car-other-btn">确认</div>
      	      <div class="get-car-list get-car-listb"><span class="active" id="0">宝马</span><span>保时捷</span><span>宾利</span><span>布加迪</span><span class="get-car-other">其他</span><div class="clear"></div></div>
      	      <div class="get-car-list get-car-listc"><span class="get-car-other">其他</span><div class="clear"></div></div>
      	      <div class="get-car-list get-car-listd"><span class="get-car-other">其他</span><div class="clear"></div></div>
      	   </div>
      	   <!--服务地点-->
					<div class="carRental-main">
					    <div class="carRental-list">
						    <ul>
						    	<li>
							    	<span class="carRental-list-icon"><img src="img/icon/fj.png"></span>
							    	<input type="text" placeholder="(选填)航班号"   />
                                      <div class="clear"></div>
							    </li>
							     <li id="for-select-car">
							    	<span class="carRental-list-icon"><img class="car" src="img/icon/qc.png"></span>
							    	<span class="for-select-car-text" style="margin-right: .5rem;color: #9A9A9A;">请选择汽车</span>
								    <select style="display: none;" id="select-car" multiple>
                                          <!---->   
                                    </select> 
								    <div class="clear"></div>
							    </li>
							    <!--车辆列表-->
							    <div class="my-car-list" style="display: none;">
							      <ul>
							      	<li>
							      		<span></span>
							      		<div><a name="520d">BMW X4</a><br><a name="520d">京A 888888</a></div>
							      		<div class="clear" style="float: none;"></div>
							      	</li>
							      	<li>
							      		<span></span>
							      		<div><a name="520d">BMW X5 灰色</a><br><a name="520d">京A 888888</a></div>
							      		<div class="clear" style="float: none;"></div>
							      	</li>
							      	<li class="my-car-list-but" style="height: 40px;     border-bottom: solid thin #B5B5B5;">确认</li>
							      </ul>
							    	
							    </div>
							    <!--车辆列表结束-->
							     <li class="for-select-local">
							    	<span class="carRental-list-icon"><img src="img/icon/dd.png"></span>
							    	<label>原地取回</label><span class="for-select-local-text" style="margin-right: .5rem;color: #9A9A9A;">选择服务地点</span>
                                      <div class="clear"></div>
							    </li>
							    <li class="carRental-timepicker">
							    	<span class="carRental-list-icon"><img src="img/icon/rl.png" name="img/icon/rl_f.png" ></span>
								    <input type="text" placeholder="选择出租时间" id="rang-time" /> <div class="clear"></div>
							        <input type="hidden" placeholder="选择出租时间" id="rang-time-start" />
							        <input type="hidden" placeholder="选择出租时间" id="rang-time-end" />
							    </li>
							    <li style="border: none;">
                                     <span class="carRental-list-icon"><img src="img/icon/qy.png"></span>
                                    <input type="text" value="原油位还车" id="for-select-car" disabled="disabled" />
								   <div class="clear"></div>
							    </li>
						    </ul>
						    <!--<div style="color:#2E6BE6;color: #2E6BE6;margin: 30px auto 30px auto;">
						    	 免费接送机服务<label class="label-switch" style="float: right;padding-top: 5px;"><input type="checkbox" checked="checked" > <div class="checkbox"></div></label>
						    	 <div class="carRental-list-jsj"><span><input type="text" placeholder="出发航班号(选填)"></span><span><input style="float: right;" type="text" placeholder="返回航班号(选填)"></span><div class="clear"></div></div>
						    </div>-->
						    <!--<div style="color:#2E6BE6">
						    	自动接单<label class="label-switch" style="float: right;padding-top: 5px;"><input type="checkbox"  > <div class="checkbox"></div></label><br>
						    <span style="color: #CAC3D9 ; font-size: 12px;display: inline-block; margin-top: 10px;">开启后您无需手动跟进车时预订情况。并在第一时间由系统自动匹配完成车时预订。</span>
						    </div>-->
						     <div style="color:#2E6BE6; margin-top: 2rem; border-bottom: solid thin #ccc;">
						    	<div style="padding: 0 1rem;color: #4C4C4C; background-color: #fff;margin: 0 auto -10px auto;width: 6rem;">可选设置 <label id="show-morefree" class="label-switch" style="float: right;"><img src="img/icon/icon_down.png" width="18px" /></label></div>
						     </div>
						     <div class="carRental-list-morefree">
						    	<ul>
						    			<li><p>租客性别</p>
						    				<span><label style="float: right;">不限</label><input checked="checked" style="float: right;" type="radio" name="xb"></span><span style="    padding-left: .9rem;"><label>女</label><input type="radio" name="xb"></span><span><label>男</label><input type="radio" name="xb" ></span><div class="clear"></div></li>
						    			<li><p>租客年龄段</p>
						    				<span><label style="float: right;">不限</label><input checked="checked" style="float: right;" type="radio" name="xb"></span><span style="    padding-left: .9rem;"><label>40+</label><input type="radio" name="xb"></span><span><label>40-</label><input type="radio" name="xb" ></span><div class="clear"></div></li>
						    			<li><p>租客驾龄</p>
						    				<span><label style="float: right;">不限</label><input checked="checked" style="float: right;" type="radio" name="xb"></span><span style="    padding-left: .9rem;"><label>3+</label><input type="radio" name="xb"></span><span><label>3-</label><input type="radio" name="xb" ></span><div class="clear"></div></li>
						    			
						    	</ul>    
						     </div>
						      <div style="text-align: center;margin: 3rem 0 0 0;"><span style=" font-size: .8rem;display: inline-block;color: #313131;">同意 车速递出租协议</span><span class="check-xy" name='0'></span></div>
						    <div><a id="carRental-submit" class=" bottn">确认发布</a></div>
					    </div>
					</div>
					<script>
					$(function () {
					my.scollToggleBar()
					if(true){
						var invalid=[ '5/25','5/26','5/27' ]
						$('.ball-pulse').fadeOut()
      	    	        key=my.get_key(my.getCookie('token'))
					   //选择时间
	                   var now=new Date();
                       var currYear = now.getFullYear();
                       $('#rang-time').mobiscroll().range({	
                       theme: 'mobiscroll',	
                       display: 'top',
                       lang:'zh',
                       rows:'3',
                       startYear: currYear,
		               endYear: currYear,
                       showLabel:true,
                       invalid: invalid,
                       calendarHeight:'210px',
                       //maxWidth: '100',//修改wheel尺寸
                       controls:  ['datetime','calendar'],
                       //controls: ['calendar', 'time'],
                       //startInput: '#rang-time-start',
                       //endInput: '#rang-time-end',
                       //endInput: $('#rang-time-end'),//结束时间
                       minDate: new Date(now.getFullYear(), now.getMonth(), now.getDate()+1, now.getHours()),
                       //dateFormat: 'Md日',
                       dateFormat: 'Md日',
                       onBeforeClose: function (valueText, inst) {
                          $('#rang-time').val(valueText)
    		              var start=valueText.substring(0,valueText.indexOf('-')).replace('月','/')
    		                  start=$.trim(start.substring(0,start.indexOf('日')))
    		              var end=valueText.substr(valueText.indexOf('-')+1).replace('月','/')
    		                  end=$.trim(end.substring(0,end.indexOf('日')))
    		                  if(start<invalid[1]&&end>invalid[0]){
    		                  	
    		                  	alert('时间范围不能包括已租车时')    		                 
    		                  	return false
    		                  }
    		                  
                         },
                        onShow: function (inst) {
                         	 $('.dw-cal-day').click(function(e){
                        	  return false
                              })
                         },
                       timeFormat: 'HH:ii',
                       timeWheels: 'Hii', 
		               timeText:'选择时间',
		               dateOrder: 'M d D',
		               //setText: '确定', //确认按钮名称
                       //cancelText: '取消',//取消按钮名籍我
		               monthText: '月',
		               dayText: '日',
	                   //yearText:'年',
		               hourText:'时',
		               minuteText:'分',
		               stepMinute: 30,
		               monthNamesShort:"1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月".split(","),
		               dayNamesShort: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
		               fromText:'开始时间',
		               toText:'结束时间', 
                     });
//                      $('#rang-time').change(function(){
//                      	var start_time=$('#rang-time-start').val();
//                      	var end_time=$('#rang-time-end').val();
//                      	var rang_time=start_time+"-"+end_time;
//                      	$(this).val(rang_time).next('span').children('img').attr('src','img/icon/ok.png')
//                      })
                        //协议选中效果
                        $('.check-xy').click(function(){
                        	$.popup('.popup');
                        	my.countSubmit('15','.xy-count')
                        })
                        $('.xy-no').click(function(){
                        	$('.check-xy').css('background-color','#fff').attr('name','0')
      				        clearTimeout(t)
      			         })
                        $('.xy-ok').click(function(){
                        	clearTimeout(t)
                        	$('.check-xy').css('background-color','#3C3C3C').attr('name','1')
                        })
                        //选择机场
//                      $("#select-airport").mobiscroll().select({ 
//                        lang: 'zh',
//                        display: 'bottom',
//                        group: true,
//                        animate: 'fade',
//                      });
                        //选择汽车
//                       $("#select-car").mobiscroll().select({ 
//                        lang: 'zh',
//                        display: 'bottom',
//                        animate: 'fade'
//                      });
                        //选择油费结算方式
//                       $("#select-gas").mobiscroll().select({ 
//                        lang: 'zh',
//                        display: 'bottom',
//                        animate: 'fade',
//                        rows:'3'
//                        //invalid:
//                      });
                        //提交执行操作
                        $('#carRental-submit').click(function(){
      				        if($('.check-xy').attr('name')=='0'){
      				        	$.alert('请勾选并阅读车速递协议')
      				        }else{
      				        	 $.router.loadPage('carRentalOk.html')
      				        	 $(this).css({'color':'#fff','backgroundColor':'#000'})
      				        }
      			        })
                        //显示更多服务
                        $('#show-morefree').click(function(){
      				    $('.carRental-list-morefree').slideToggle()
      				     if($(this).find('img').attr('src')=='img/icon/icon_down.png'){
      				     	$(this).find('img').attr('src','img/icon/icon_up.png')
      				     }else{
      				     	$(this).find('img').attr('src','img/icon/icon_down.png')
      				     }
      			        })
                        //选择服务地点开始
                        $('.for-select-local').click(function(e){
      				       $('span[name=abcd]').trigger('click')
      				       $('.get-car-hold').show(300)
      				       $('.get-car').show(300)
      			      })
      			     $('.get-car-hold').click(function(){
      				    $(this).hide()
      				    $('.get-car').hide()
      			     })
      			var list=[
		      {"band":"bmw",
		       "name":"宝马",
			   "Id":"1",
			   "xi":[
				           {  "name":"车系1",
				      	      "车系id":"id",
				      	      "carlist":[{"carid":"carid","carname":"carname1"},{"carid":"carid","carname":"carname1"}]
				          },
				           {  "name":"车系2",
				      	      "车系id":"id",
				      	      "carlist":[{"carid":"carid","carname":"carname2"},{"carid":"carid","carname":"carname2"}]
				            }
				     ]
		     },
		     {"band":"bl",
		       "name":"宝来",
			   "Id":"1",
			   "xi":[
				           {  "name":"车系3",
				      	      "车系id":"id",
				      	      "carlist":[{"车辆id":"carid","carname":"carname3"},{"carid":"carid","carname":"carname3"}]
				            }
				     ]
		      }
	        ]
	         $('.get-car-lista span').click(function(){
		       $('.get-car-lista span').removeClass('active')
		       $(this).addClass('active')
		       var name=$(this).attr('name')
		       $('.get-car-listb span').not('.get-car-other').remove()
		       $('.get-car-listb').show()
		       $('.get-car-listc,.get-car-listd,.get-car-other-box,.get-car-other-btn').hide()
		       for(i=0;i<list.length;i++){
			      if(name.match(list[i].band.substr(0,1))){
				      var html="<span id='"+i+"'>"+list[i].name+"</span>"
				     $('.get-car-listb').prepend(html)
		          }
		        }
		        $('.get-car-listb span').not('.get-car-other').click(function(){
		 	              $('.get-car-listb span').removeClass('active')
		                  $(this).addClass('active')
		                  $('.get-car-listc span').not('.get-car-other').remove()
		                  $('.get-car-listc').show()
		                  $('.get-car-listd span').not('.get-car-other').remove()
		                  $('.get-car-listd').hide()
		                  var j=$(this).attr('id')
		                  for(i=0;i<list[j].xi.length;i++){
		                  	   var html="<span id='"+j+"' name='"+i+"'>"+list[j].xi[i].name+"</span>"
		                     $('.get-car-listc').prepend(html)
		                   }
		                   $('.get-car-listc span').not('.get-car-other').click(function(){
		                   	                     $('.get-car-listc span').removeClass('active')
		                                         $(this).addClass('active')
		                                         $('.get-car-listd span').not('.get-car-other').remove()
		                                         $('.get-car-listd').show()
		                                         var j=$(this).attr('id')
		                                         var w=$(this).attr('name')
		                                         for(i=0;i<list[j].xi[w].carlist.length;i++){
		                                         	var html="<span id='"+list[j].xi[w].carlist[i].carid+"'>"+list[j].xi[w].carlist[i].carname+"</span>"
		                                            $('.get-car-listd').prepend(html)
		                                          }
		                                          $('.get-car-listd span').not('.get-car-other').click(function(){
                	                                $('.for-select-local-text').text($(this).text())
                	                                $('.for-select-local-text').attr('title',$(this).attr('id'))
                	                                $('.get-car').hide()
      				                                $('.get-car-hold').hide()
                                                  })
	                    })
	                })
                })	
               $('.get-car-listb span').not('.get-car-other').click(function(){
		                  $('.get-car-listc span').remove()
		                  $('.get-car-listc').show()
		                  $('.get-car-listd span').remove()
		                  var j=$(this).attr('id')
		                  for(i=0;i<list[j].xi.length;i++){
		                  	   var html="<span id='"+j+"' name='"+i+"'>"+list[j].xi[i].name+"</span>"
		                     $('.get-car-listc').prepend(html)
		                   }
               })
                $('.get-car-other').click(function(){
               	   $('.get-car-listb,.get-car-listc,.get-car-listd').hide()
               	   $('.get-car-other-box,.get-car-other-btn').show()
               	   
                })
                $('.get-car-other-btn').click(function(){
                	$('.for-select-local-text').text($('.get-car-other-box').val())
//              	$('[name=car]').attr('title',$(this).attr('id'))
                	$('.get-car').hide()
      				$('.get-car-hold').hide()
                })
                        //选择服务地点结束
                        //自动输入完成效果
//                      $('select').change(function(){
//                      	if($(this).val()==''){
//                      		$.toast($(this).find('option').eq(0).text())
//                      	}else{
//                      	   $(this).next('span').children('img').attr('src','img/icon/ok.png')
//                      	}
//                      })
                        //选择汽车
                        $('#for-select-car').click(function(){
                        	$('.my-car-list').fadeIn()
                        })
                        $('#for-select-car').change(function(){
                        	if($(this).val()==''){
                        		$.alert('请选择汽车')
                        	}
//                      	else{
//                      		
//                      	   $(this).next('span').children('img').attr('src','img/icon/ok.png')
//                      	}
                        })
                        $('.my-car-list li').click(function(){
                        	$(this).find('span').toggleClass('add_color');
                        	if($(this).find('span').hasClass('add_color')){
                        		
                        	}
                        })
                        $('.my-car-list-but').click(function(){
                        	$('.my-car-list').hide()
                        	var input_now='';
                        	$('#select-car').empty();
                        	var car_length=$('.my-car-list li').length;
                        	for(var i=0;i<car_length;i++){
                        		if($('.my-car-list li').eq(i).find('span').hasClass('add_color')){
                        		 var car=$('.my-car-list li').eq(i).find('a:first').text()
                        	     var car_val=$('.my-car-list li').eq(i).find('a').attr('name')
                        	     var opt= "<option value="+car_val+" selected>"+car+"</option>"
                        	     $('#select-car').append(opt)
                        	     input_now=input_now+','+car
                        		}
                        	}
                        	$('.for-select-car-text').text(input_now)
                        	if($('.for-select-car-text').text()=='请选择汽车'||$('.for-select-car-text').text()==''){
                        		$('.for-select-car-text').text('请选择汽车')
                        		$.toast('请选择汽车')
                        	}
//                      	else{
//                      		$('.car').attr('src','img/icon/ok.png')
//                      	}
                        	
                        	
                        	
                        })
                        }
                    });

					</script>
		</div>
		<div class="popup">
               <div class="content-block">
                    <p class="xy-head">车速递出租协议</p>
                    <div class="xy-content xy-a">
                    	“哦，你来啦。”那同学看见我，急忙丢下鸟笼，来到我面前：“要玩跳棋吗?”我最近新买了一副跳棋。”“嗯，好的。”我虽然嘴上答应了，但眼睛一直盯着那个鸟笼。“快点啊，来帮忙拿棋子。”那个同学叫我，“哦。”我依旧心不在焉，同学给我拿了一瓶饲料，趁我喝饲料的过程中摆好了棋子，“来吧!你先下还是我先?”“喂，你能专心点吗!”“好吧，你先。”……“喂，你今天怎么了?怎么连输三局，你跳棋不是下得还好的吗?”不知道过了多久，我被他从沉思中拉了回来，我并没有回答他的问题，而是问他：“你那两只鸟儿哪来的?放掉可以吗?”
　　“什么?放掉!我好不容易从花鸟市场买来的，要五十元呢!”他很惊讶，之前一直弯着的腰也直了起来。“你突然问这个干嘛?”“把它们关在笼子里，你不觉得很残忍吗?”之前，在长达半小时的观察中，我发现它们是野生的鸟，它们向往并热爱大自然，把它们关在这个空间狭小的笼子里，显然是不长久的，因为它们向往自由。
　　“不觉得呀，它们不是很开心的吗?还唱歌呢!”他不屑一顾，唉，那两只鸟在“唱歌”是因为悲伤啊!是哀鸣而不是歌唱啊!“你想想，它们也有家庭也有亲人，如果***妈找不到你会怎样呢?”我反问道，“它们又不是我。”他依然摆出一副事不关己的样子。“只要它们能为我唱歌就行。”唉!
                    </div>
                    <p class="xy-btn"><a class="close-popup xy-no">不同意</a><a class="close-popup xy-ok"><span class="xy-count" style="padding-right: .3rem;">15</span>同意</a></p>
                </div>
             </div>
	</body>
</html>
